<script setup lang="js">
	import { useRouter } from 'vue-router'

	window.AIOSys.ipcRenderer.send('onWindowCanReSize', false)
	const chartArr = [
		'1',
		'2',
		'3',
		'4',
		'5',
		'6',
		'7',
		'8',
		'9',
		'0',
		'a',
		'b',
		'c',
		'd',
		'e',
		'f',
		'g',
		'h',
		'i',
		'j',
		'k',
		'l',
		'm',
		'n',
		'o',
		'p',
		'q',
		'r',
		's',
		't',
		'u',
		'v',
		'w',
		'x',
		'y',
		'z'
	]

	const loginUser = ref({
		userName: '',
		userPassWord: ''
	})

	const router = useRouter()

	const onLogin = () => {
		//#region 数据验证

		let userNameCharts = [...loginUser.value.userName]
		let userPassWordCharts = [...loginUser.value.userPassWord]
		//filter: 过滤
		// 1: 遍历数组
		// 2：带return ，则返回 return的值
		let _userNameCharts = userNameCharts.filter((v) => {
			if (!chartArr.includes(v)) return v
		})
		let _userPassWordCharts = userPassWordCharts.filter((v) => {
			if (!chartArr.includes(v)) return v
		})

		if (
			_userNameCharts.length > 0 ||
			_userPassWordCharts.length > 0
		) {
			ElMessage({
				showClose: true,
				offset: 50,
				message: '您的账户或者密码存在非法字符',
				type: 'error'
			})

			return
		}

		if (
			loginUser.value.userName.length < 7 ||
			loginUser.value.userName.length > 20
		) {
			ElMessage({
				showClose: true,
				offset: 50,
				message: '账户的长度最低7位，最多20位！',
				type: 'warning'
			})
			return
		} else if (
			loginUser.value.userPassWord.length < 7 ||
			loginUser.value.userPassWord.length > 20
		) {
			ElMessage({
				showClose: true,
				offset: 50,
				message: '密码的长度最低7位，最多20位！',
				type: 'warning'
			})
			return
		}
		//#endregion
		console.log('Login')

		router.push({
			path: './Home'
		})
	}

	console.log(window)

	/**
	 * 最小化 窗体
	 */
	const onWindowMin = () => {
		window.AIOSys.ipcRenderer.send('onWindowMin')
	}

	/**
	 * 最小化 窗体
	 */
	const onAppQuit = () => {
		window.AIOSys.ipcRenderer.send('onAppQuit', false)
	}
</script>
<template>
	<div>
		<div class="layoutMain">
			<div class="NO_USER_SELECT main">
				<el-container>
					<el-header
						class="login_header CAN_DRAG">
						<div class="header_btns">
							<div
								@click="
									onWindowMin
								"
								class="btns_action NO_DRAG">
								<el-icon
									><SemiSelect
								/></el-icon>
							</div>
							<div
								@click="
									onAppQuit
								"
								class="btns_action NO_DRAG">
								<el-icon
									><CloseBold
								/></el-icon>
							</div>
						</div>
						<el-button-group
							class="NO_DRAG">
						</el-button-group>
					</el-header>
					<el-main class="login_body">
						<el-form
							label-width="auto"
							style="
								max-width: 600px;
								margin-top: 20vh;
							">
							<el-form-item
								label="账户">
								<el-input
									v-model="
										loginUser.userName
									"
									placeholder="请输入账户" />
							</el-form-item>
							<el-form-item
								label="密码">
								<el-input
									v-model="
										loginUser.userPassWord
									"
									placeholder="请输入密码" />
							</el-form-item>
							<el-form-item>
								<el-button
									style="
										margin: 0
											auto;
										margin-top: 30vh;
										width: 200px;
									"
									type="primary"
									@click="
										onLogin
									"
									>登录</el-button
								>
							</el-form-item>
						</el-form>
					</el-main>
				</el-container>
			</div>
		</div>
	</div>
</template>
<style scoped lang="css">
	.layoutMain {
		display: flex;
		justify-content: center;
		justify-items: center;
		align-items: center;
		align-content: center;
		flex-flow: column nowrap;
		width: 100%;
		background-color: transparent;
	}
	.main {
		width: calc(100% - 40px);
		height: 100%;
		margin: 25px;
		background-color: #909399;
		border-radius: 8px;

		box-shadow:
			5px 5px 10px #e6a23c,
			-5px -5px 10px #ffffff;

		overflow: hidden;
		box-sizing: border-box;
	}
	.login_header {
		/* background-color: #f56c6c; */
		height: 60px;
	}
	.login_body {
		/* background-color: #67c23a; */
		height: calc(100vh - 60px);
	}
	.login_footer {
		/* background-color: #f56c6c; */
		/* height: 10vh; */
	}
	.header_btns {
		height: 40px;
		display: flex;
		flex-flow: row nowrap;
		justify-items: center;
		justify-content: flex-end;
		text-align: right;
		align-items: center;
		align-content: center;
	}
	.btns_action {
		width: 30px;
		height: 30px;
		/* background-color: #e6a23c; */
		/* margin-right: 20px; */
		text-align: center;
		color: green;
		padding: 10px;
	}
</style>
